<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '#' }">
                运动会比赛成绩管理
            </el-breadcrumb-item>
            <el-breadcrumb-item>
                <a href="#">等级运动员管理</a>
            </el-breadcrumb-item>
        </el-breadcrumb>

        <el-card class="port-card">
            <el-row>
                <el-col :span="17">
                    <table class="table table-bordered" cellspacing="0">
                        <tbody>
                            <tr class="table_top1">
                                <td class="table_title">运动等级：</td>
                                <td class="Lv" v-for="(item, index) in nameContract" :key="index">{{ item.dj
                                    }}</td>
                            </tr>
                            <tr class="table_top">
                                <td class="table_title">分值：</td>
                                <td v-for="(item, index) in porinput" :key="index">
                                    <el-input class="inp1" size="small" v-model.number="item.fvalue"></el-input>
                                </td>
                            </tr>
                            <tr class="table_top">
                                <td class="table_title">加分模式：</td>
                                <td>
                                    <el-select size="small" v-model="pointfrom.type">
                                        <el-option label="按每个项目加分" value="1"></el-option>
                                        <el-option label="按每个运动员加分" value="2"></el-option>
                                    </el-select>
                                </td>
                                <td>
                                    <el-select size="small" v-model="pointfrom.expressname">
                                        <el-option label="高校等级标准" value="高校等级标准"></el-option>
                                    </el-select>
                                </td>
                                <td>
                                    <el-button type="warning" size="small" @click="postStatistics">统计</el-button>
                                </td>
                                <td>
                                    <el-button type="danger" size="small"
                                        @click="deleteLvExercise">删除运动等级,加分值</el-button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </el-col>
                <el-col :span="6">
                    <div class="col_text">
                        <span>1.等级统计前需要先对项目的比赛成绩进行排名</span>
                        <p>2.一个项目计最高等级分1次或一名运动员计最高运动等级分1次</p>
                        <el-button v-if="portData.length !== 0" type="primary" size="small"
                            @click="exportExcel">导出</el-button>
                    </div>
                </el-col>
            </el-row>

            <el-table :data="currentPageData" border stripe>
                <el-table-column type="index" label="序号" width="60">
                    <template #default="scope">
                        <span>{{ (queryObj.limit * (queryObj.page - 1)) + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="fnoName" label="运动等级">
                </el-table-column>
                <el-table-column prop="teamName" label="参赛单位">
                </el-table-column>
                <el-table-column prop="sexName" label="性别">
                </el-table-column>
                <el-table-column prop="gridName" label="组别">
                </el-table-column>
                <el-table-column prop="plid1Name" label="姓名">
                </el-table-column>
                <el-table-column prop="msidName" label="比赛项目">
                </el-table-column>
                <el-table-column prop="scoreTime" label="比赛成绩">
                    <template #default="scope">
                        {{ scope.row.scoreTime === "00:00:00.000" ? "" : scope.row.scoreTime }}
                    </template>
                </el-table-column>
                <el-table-column prop="startdate" label="日期">
                </el-table-column>
                <el-table-column prop="fdf" label="分值">
                </el-table-column>
            </el-table>
            <el-pagination class="paging" @size-change="handleSizeChange" @current-change="handlePageChange" background
                :page-sizes="[3, 5, 10, 15, 20, 50]" layout="total, prev, pager, next, jumper" :total="total"
                :page-size="queryObj.limit" :current-page="queryObj.page">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            queryObj: {
                limit: 10,
                page: 1,
                query: " "
            },
            total: 0,
            currentPageData: [],
            nameContract: [
                { dj: '10级' },
                { dj: '11级' },
                { dj: '12级' },
                { dj: '运动健将' },
                { dj: '国际运动健将' },
            ],
            pointfrom: {
                level10: null,
                level11: null,
                level12: null,
                athlete: null,
                internationalathlete: null,
                type: '1',
                expressname: '高校等级标准',
            },
            portData: [],
            porinput: [],
        }
    },
    created() {
        this.postPointList();
        this.postGradesList();
    },
    methods: {
        // 查询
        async postPointList() {
            const result = await this.$http.post(this.BACKEND_URL + '/degreeAthlete/getScores');
            if (result.data.code == 0) {
                this.porinput = result.data.data
                this.porinput.sort((a, b) => b.fno - a.fno)
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async postGradesList() { //数据
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/degreeAthlete/getmsg');
                if (result.data.code == 0) {
                    this.portData = result.data.data
                    this.total = this.portData.length
                    this.fetchData()
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        // 删除运动等级
        async deleteLvExercise() {
            const result = await this.$http.post(this.BACKEND_URL + '/degreeAthlete/delete');
            if (result.data.code == 0) {
                this.postGradesList()
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        // 统计
        async postStatistics() {
            this.pointfrom.level10 = this.porinput[0].fvalue
            this.pointfrom.level11 = this.porinput[1].fvalue
            this.pointfrom.level12 = this.porinput[2].fvalue
            this.pointfrom.athlete = this.porinput[3].fvalue
            this.pointfrom.internationalathlete = this.porinput[4].fvalue
            const result = await this.$http.post(this.BACKEND_URL + '/degreeAthlete/statis', this.pointfrom);
            if (result.data.code == 0) {
                this.$message({
                    type: 'success',
                    message: '统计成功!'
                });
                this.postGradesList()
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        // 导出
        async exportExcel() {
            try {
                const result = await this.$http.get(this.BACKEND_URL + '/degreeAthlete/export', {
                    responseType: 'blob',
                });
                let downloadUrl = window.URL.createObjectURL(new Blob([result.data]));

                const link = document.createElement('a');
                link.href = downloadUrl;
                link.setAttribute('download', '达等级运动员S.xlsx');
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            } catch (error) {
                console.error('File export failed:', error);
            }
        },
        // 分页
        fetchData() {
            let startIndex = (this.queryObj.page - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.portData.slice(startIndex, endIndex);
        },
        handleSizeChange(newSize) {
            this.queryObj.limit = newSize
        },
        handlePageChange(newPage) {
            this.queryObj.page = newPage;
            let startIndex = (newPage - 1) * this.queryObj.limit;
            let endIndex = startIndex + this.queryObj.limit;
            this.currentPageData = this.portData.slice(startIndex, endIndex);
        }
    }
}
</script>

<style lang="less" scoped>
.port-card {
    margin-top: 15px;

    .el-table {
        margin-top: 5px;
    }
}

.col_text {
    text-align: left;
    font-size: 13px;
    color: #abb3bd;
}

.table {
    width: 100%;

    .el-input {
        width: 70px;
    }

    .table_top1 {
        display: flex;

        .Lv {
            width: 105px;
            height: 24px;
            font-size: 14px;
        }
    }

    .table_top {
        display: flex;
        margin-top: 5px;

        .el-select {
            width: 120px;
            margin-left: 32px;
        }

        .el-button {
            margin-left: 11px;
        }
    }
}

.table_title {
    text-align: right;
    width: 80px;
    font-size: 14px;
}

.inp1 {
    margin-left: 32px;
}

.paging {
    margin-top: 15px;
}

// .inp2 {
//     margin-left: 13px;
// }

// .inp3 {
//     margin-left: 50px;
// }

@media (max-width: 1145px) {
    .col_text {
        display: none;
    }
}
</style>